<html>
    <head>
        <title>Ajuda</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style type="text/css">
            p{
                margin: 0;
            }
        </style>
    </head>
    <body>
        <h2 style="color:blue;text-align:center">Ajuda</h2>
        <h3 style="color:blue;text-align:center">Aplicação das Telhas</h3>

        <div style="width:100%;height:200px;margin-top:50px;font-weight:bold;">
            <div style="text-align:left;margin:0 auto;width:500px;">
                <div style="overflow-y:auto;height:150px;border-style:solid;border-color:#2D96FF;padding:10px;">
                    <p>A aplicação disponibiliza as seguintes funcionalidades:</p>
                    <br/>
                    <p>Menu Lateral Esquerdo:</p>
                    <br/>
                    <ul style="margin-top:0">
                        <li>
                            Palete
                            <ul>
                                <li>
                                    Criar família
                                </li>
                                <li>
                                    Criar estilo
                                </li>
                                <li>
                                    Criar telha
                                </li>
                                <li>
                                    Criar template, permite definir como uma estratégia calcula as novas posições de uma telha ou criar uma nova estratégia:
                                    <ul>
                                        <li>
                                            Criar/Editar ficheiros .java
                                        </li>
                                        <li>
                                            Compilar ficheiros .java
                                        </li>
                                        <li>
                                            Definir um ficheiro .class como estratégia para mover as telhas
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>

                    <br/>
                    <p>Menu de Topo:</p>
                    <br/>
                    <ul style="margin-top:0">
                        <li>
                            Ficheiro
                            <ul>
                                <li>Ajuda</li>
                                <li>Sobre</li>
                                <li>Sair</li>
                            </ul>
                        </li>
                        <li>
                            Vista
                            <ul>
                                <li>
                                    Estratégia Normal
                                    <ul>
                                        <li>
                                            Permite mover as telhas livremente
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    Estratégia Grelha
                                    <ul>
                                        <li>
                                            Permite mover as telhas sobre uma grelha
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li>
                            Avançado
                            <ul>
                                <li>Ver todas as famílias</li>
                                <li>Ver todos os estilos</li>
                            </ul>
                        </li>
                    </ul>

                    <br/>
                    <p>Menu de Operações:</p>
                    <br/>
                    <ul style="margin-top:0">
                        <li>Guardar</li>
                        <li>Undo</li>
                        <li>Redo</li>
                    </ul>

                    <br/>
                    <p>Modos de Edição na Grelha:</p>
                    <br/>
                    <ul style="margin-top:0">
                        <li>Clique Esquerdo -> mover telha</li>
                        <li>
                            CTRL + Clique Esquerdo -> Activar Modo ancoras
                            <ul>
                                <li>Clique Esquerdo -> Marcar Ancoras</li>
                            </ul>
                        </li>
                        <li>
                            Clique Esquerdo no Quadrante Inferior Direito da Telha -> Redimensionar a telha
                        </li>
                        <li>
                            Clique direito na telha permite:
                            <ul>
                                <li>
                                    Decorar
                                </li>
                                <li>
                                    Criar cópia
                                </li>
                                <li>
                                    Apagar
                                </li>
                                <li>
                                    Criar um estilo
                                </li>
                                <li>
                                    Criar um estilo a partir do estilo default da família
                                </li>
                                <li>
                                    Inspeccionar
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
            <div style="text-align:right;margin-top:50px;margin-right:50px;">
                <p style="font-weight:bold;color:#B5281B;">ISEC/DEIS</p>
            </div>
        </div>
    </body>
</html>
